<template name="mine">
	<view>
	<view class="content">
		<!-- 头像 -->
		<view class="person-details bg-white">
			<view class="cu-avatar xl round margin tops">
				<image v-if="isLogin == true" class="head-img" :src="userInfo.avatarUrl"/>
				<image v-if="isLogin == false" class="head-img" src="../../static/head.png"/>
			</view>
			<view v-if="isLogin == true" class="tops nick-name">
				<text>{{userInfo.nickName}}</text>
			</view>
			<navigator v-if="isLogin == false" hover-class="none" url="/pages/login/index" class="tops nick-name">
				<text>登录</text>
			</navigator>
		</view>
		<view class="list-menu bg-white">
			<navigator hover-class="none" :url="'/pages/mine/' + item.url" class="menu" v-for="(item,index) in menuList" :key="index">
				<view class='cu-tag bg-white'>
					<image class="icon-img" :src="'/static/'+ item.icon" />
				</view>
				<view class='cu-tag bg-white'>
					<text class="menu-title">{{item.name}}</text>
				</view>
				<view class='cu-tag bg-white arrow'>
					<text class="cuIcon-right"></text>
				</view>
			</navigator>
		</view>
	</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	export default {
		data() {
			return {
				menuList:[
					{
						icon: 'icon_complaint.png',
						name:"意见反馈",
						url: "feedback"
					}
				]
			}
		},
		computed: {
			...mapState(['isLogin','userInfo']),
		},
		onLoad() {
			// console.log(this.test);
			// console.log(this.test1());
		},
		methods: {
			openinfo(e) {
				var newsid = e.currentTarget.dataset.newsid;
				uni.navigateTo({
					url: '../info/info?newsid=' + newsid
				});
			},

			bindPickerChange: function() {
				console.log("sdfsd");
			}

		}
	}
</script>

<style>
	.tops {
		position: relative;
		display: inline-flex;
	}
	.nick-name {
		font-size: 20px;
		color: #000000;
		font-weight: 400;
		margin-left: 10px;
	}
	.person-details {
		height: 7.0em;
		line-height: 7.0em;
	}
	.margin {
		margin: 5px 20px;
	}
	.head-img {
		height: 64px;
		width: 64px;
		border-radius: 50%;
	}

	.list-menu {
		margin-top: 10px;
	}

	.menu {
		height: 4.0em;
		line-height: 4.0em;
	}

	.icon-img {
		height: 20px;
		width: 20px;
		margin-left: 15px;
	}

	.menu-title {
		font-size: 16px;
		color: #1C1C1C;
	}

	.menu {
		height: 4.0em;
		line-height: 4.0em;
		border-bottom: 1px solid #F4F4F4;
	}
	.arrow {
		position: absolute;
		right: 5px;
		margin: 18px 5px;
	}
</style>
